<template>
  <div>
    <el-breadcrumb separator="/" class="submenu">
      <el-breadcrumb-item class="submenu-left" :to="{ path: '/Index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">SRM品类管理</a></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main-table">
    <el-form :inline="true" :model="ruleForm2" ref="ruleForm2" class="demo-form-inline">
      <el-form-item label="物料编码：" prop="userName">
        <el-input v-model="ruleForm2.userName" placeholder="物料编码"></el-input>
      </el-form-item>
      <el-form-item label="物料名称：" prop="companyId">
        <el-input v-model="ruleForm2.companyId" placeholder="物料名称"></el-input>
      </el-form-item>
      <el-form-item label="创建时间:" prop="deptName">
        <el-input v-model="ruleForm2.deptName" placeholder="创建时间"></el-input>
      </el-form-item>
      <el-form-item label="位置号:" prop="checkbox">
        <el-input v-model="ruleForm2.checkbox" placeholder="位置号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleForm2)">查询</el-button>
        <el-button type="primary" @click="resetForm('ruleForm2')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData4" style="width: 100%" max-height="250" :default-sort = "{prop: 'materialCode', order: 'descending'}">
      <el-table-column prop="id"></el-table-column>
      <el-table-column prop="materialCode" label="物料编码" sortable width="150"></el-table-column>
      <el-table-column prop="materialName" label="物料名称" width="250"></el-table-column>
      <el-table-column prop="materialNameEn" label="英文名称" width="150"></el-table-column>
      <el-table-column prop="stockUnitCode" label="基本单位" width="250"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
      <el-table-column prop="locationNo" label="位置号" width="200"></el-table-column>
      <el-table-column prop="sourceNo" label="来源号" width="200"></el-table-column>
      <el-table-column prop="cpFlag" label="是否可以集采" width="200"></el-table-column>
    </el-table>
    <page></page>
    </div>
  </div>
</template>
<script>
  import axios  from 'axios'
  import Page from '@/components/page.vue'
  export default {
    components:{
      Page
    },
    data() {
      return {
        activeName: 'first',
        ruleForm2: {
          purGroupCode: '',
          purGroupName: '',
          purOrgName:''
        },
       tableData4: [],
      };
    },
    mounted(){
      this.tableData4f();
    },
    methods: {
      tableData4f(){
        axios.post(this.lib.config.host.masterData + "/mdata/material/query?page=1&rows=10")
        .then((response)=> {
          console.log(response);
          this.tableData4 = response.data.rows;
        })
        .catch((error)=> {
          console.log(error);
        });
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      deleteRow(index, rows) {
        rows.splice(index, 1);
      },
      submitForm(formName) {
          var formData = JSON.stringify(this.ruleForm2);
          console.log(formData);
          axios.post(this.lib.config.host.masterData +  "/mdata/material/query?page=1&rows=10",
          formData,{
            contentType: 'application/json'
          })
          .then(res => {

          }).catch(error => {
            console.log('网络错误，不能访问');
          });
      },
        resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style>

</style>
